import { RepoLink } from 'libframe-docs/components/RepoLink'

We can use `vite-plugin-ssr` with any Vite/Rollup markdown plugin.


## Vue

For Vue, we can use [`vite-plugin-md`](https://github.com/antfu/vite-plugin-md).

Example:
 - <RepoLink path='/examples/vue-full/vite.config.ts' />
 - <RepoLink path='/examples/vue-full/pages/markdown.page.md' />


## React

For React and MDX v1 we can use [`vite-plugin-mdx`](https://github.com/brillout/vite-plugin-mdx).

For MDX v2 we can use [`@mdx-js/rollup`](https://mdxjs.com/packages/rollup/).

Example:
 - <RepoLink path='/examples/react-full/vite.config.ts' />
 - <RepoLink path='/examples/react-full/pages/markdown.page.mdx' />


## `<head>` (`pageContext.pageExports`)

To set the `<head>` tags value of a markdown page,
we can simply use [`pageContext.pageExports`](/pageContext).

~~~js
// some.page.md

export const documentProps = {
  title: 'A Markdown Page',
  description: 'Example of setting `<title>` and `<meta name="description">`'
}

# Markdown

This page is written in _Markdown_.
~~~

```js
// _default.page.server.js

import { escapeInject } from 'vite-plugin-ssr'

export async function render(pageContext) {
  // `pageContext.pageExports` holds all exports of the page's `.page.js` file
  const { title, description } = pageContext.pageExports.documentProps
  return escapeInject`<html>
    <head>
      <title>${title}</title>
      <meta name="description" content="${description}">
    </head>
    <!-- ... -->
  </html>`
}
```

Examples:
 - <RepoLink path='/examples/react-full/pages/markdown.page.md' />
 - <RepoLink path='/examples/vue-full/pages/markdown.page.md' />


## `<head>` (frontmatter)

Some markdown processors also have support for a so-called *frontmatter* to define the page's metadata.

```
---
title: A Markdown Page
description: Example of setting `<title>` and `<meta name="description">`
---

# Markdown

This page is written in _Markdown_.
```

> Make sure the Vite markdown plugin you are using has frontmatter support.

Markdown processors usually expose the frontmatter data as an export,
which we can access at [`pageContext.pageExports`](/pageContext).

```js
// _default.page.server.js

import { escapeInject } from 'vite-plugin-ssr'

export async function render(pageContext) {
  // Read the documentation of your Vite markdown plugin or of its underlying markdown
  // processor to find the name of the export that holds the frontmatter data.
  const frontmatterExportName = 'nameOfTheFrontmatterExport'
  const frontmatter = pageContext.pageExports[frontmatterExportName]
  const { title, description } = frontmatter
  return escapeInject`<html>
    <head>
      <title>${title}</title>
      <meta name="description" content="${description}">
    </head>
    <!-- ... -->
  </html>`
}
```
